<template>
  <div class="reset-pwd">
    <div class="title">
      <h3>修改密码</h3>
    </div>
    <div class="reset-from">
      <div class="input-item">
        <span class="items-center">原密码</span>
        <el-input
          v-model="oldPwd"
          class="w-50 m-2"
          placeholder="请输入原密码"
        />
      </div>
      <div class="input-item">
        <span class="items-center">新密码</span>
        <el-input
          v-model="newPwd1"
          class="w-50 m-2"
          placeholder="请输入新密码"
        />
      </div>
      <div class="input-item">
        <span class="items-center">确认新密码</span>
        <el-input
          v-model="newPwd2"
          class="w-50 m-2"
          placeholder="请输入新密码"
        />
      </div>
    </div>
    <div class="btn-box">
      <el-button type="primary" :plain="true" @click="resetPwd">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios"; // 引入axios
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let store = useStore();
const router = useRouter();

let oldPwd = ref(""); // 旧密码
let newPwd1 = ref(""); // 新密码
let newPwd2 = ref(""); // 确认新密码

// 重置密码按钮
let resetPwd = () => {
  if (newPwd1.value != newPwd2.value) {
    ElMessage.error("新密码输入不同，请重新输入");
    return;
  }
  if (oldPwd.value && newPwd1.value && newPwd2.value) {
    axios
      .post("http://192.168.27.59/worker/workerUpdatedPwd", {
        id: store.state.userInfo.id,
        oldPwd: oldPwd.value,
        newPwd: newPwd2.value,
      })
      .then((res) => {
        if (res.data.code == 502) {
          ElMessage.error(res.data.message);
          return;
        } else if (res.data.code == 400) {
          ElMessage.error(res.data.message);
          return;
        } else if (res.data.code == 200) {
          ElMessage({
            message: res.data.message,
            type: "success",
          });
        } else {
          ElMessage.error("未知错误");
        }
      });
  } else {
    ElMessage.error("你还没有输入内容哦！");
  }
};
// 取消重置密码按钮
let cancel = () => {
  router.push({ path: "/home" });
};
</script>

<style lang="scss" scoped>
.reset-pwd {
  width: 60vw;
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #fff;
  // 标题
  .title {
    width: 100%;
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid rgba($color: #666, $alpha: 0.2);
    box-sizing: border-box;
    h3 {
      font-size: 14px;
      line-height: 20px;
      padding-left: 10px;
      border-left: 3px solid #409eff;
      border-radius: 1px;
    }
  }
  // 输入框
  .reset-from {
    width: 40%;
    margin: 0 auto;
    padding: 10vh 0;
    .input-item {
      display: flex;
      align-items: center;
      margin: 12px 0;
      .items-center {
        width: 20%;
        font-size: 14px;
        display: inline-block;
        text-align: right;
        padding-right: 6%;
      }
      .w-50 {
        width: 70%;
      }
    }
  }
  // 按钮
  .btn-box {
    display: flex;
    justify-content: flex-end;
    padding: 1.625rem;
    button {
      width: 6rem;
    }
  }
}
</style>
